<template>
  <a-drawer
    :visible="visible"
    :title="代付金额调整"
    width="30%"
    :maskClosable="false"
    @close="onClose">

    <a-form-model ref="infoFormModel" :model="saveObject" layout="vertical" :rules="rules">
        <a-col :span="12">
         <a-descriptions>
          <a-descriptions-item label="商户号">{{ saveObject.mchNo }}</a-descriptions-item>
        </a-descriptions>
        </a-col>
        <a-col :span="12">
       <a-descriptions>
          <a-descriptions-item label="应用名称">{{ saveObject.appName }}</a-descriptions-item>
        </a-descriptions>
        </a-col>
        <a-col :span="13">
        <a-descriptions>
          <a-descriptions-item label="当前账户余额">{{ (saveObject.balance / 100 ).toFixed(2) }}</a-descriptions-item>
        </a-descriptions>
        </a-col>
         <a-col :span="13">
          <a-form-model-item label="增加金额(元)" prop="amount">
            <a-input v-model="saveObject.amount" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="13">
          <a-form-model-item label="换U金额" prop="rate">
            <a-input v-model="saveObject.rate" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
    </a-form-model>

    <div class="drawer-btn-center">
      <a-button @click="onClose" icon="close" :style="{ marginRight: '8px' }">取消</a-button>
      <a-button type="primary" @click="addBalance()" icon="check" >保存</a-button>
    </div>

  </a-drawer>
</template>

<script>
import { API_URL_MCH_APP, req, API_URL_ISV_MCH_LIST, addBalance } from '@/api/manage'

export default {
  props: {
    callbackFunc: { type: Function, default: () => () => ({}) }
  },

  data () {
    return {
      isAdd: true, // 新增 or 修改
      visible: false, // 抽屉开关
      appId: '', // 应用AppId
      saveObject: {}, // 数据对象
      rules: {
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      },
      selectList: []
    }
  },
  methods: {
    // 抽屉显示
    show (mchNo, appId) {
      this.isAdd = !appId
       // 数据清空
      this.saveObject = {
        'state': 1,
        'appSecret': '',
        'mchNo': mchNo,
        'appSecret_ph': '请输入'
      }

      if (this.$refs.infoFormModel !== undefined) {
        this.$refs.infoFormModel.resetFields()
      }
      this.reqTableDataFunc(appId)

      const that = this
      that.rules.appSecret = []
      if (!this.isAdd) { // 修改信息 延迟展示弹层
        that.appId = appId
        // 拉取详情
        req.getById(API_URL_MCH_APP, appId).then(res => {
          that.saveObject = res
          that.saveObject.appSecret_ph = res.appSecret
        })
        this.visible = true
      }
    },
    // 请求table接口数据
    reqTableDataFunc (appId) {
      const _this = this
      req.list(API_URL_ISV_MCH_LIST, { 'pageSize': -1, 'state': 1, 'appId': appId }).then(res => { // 服务商下拉选择列表
        _this.selectList = res.records
      })
    },
    // 表单提交
    addBalance: function () {
      const that = this
      this.$refs.infoFormModel.validate(valid => {
        if (valid) { // 验证通过
          // 请求接口
          addBalance(that.appId, that.saveObject.amount, that.saveObject.rate).then(res => {
            that.$message.success('修改成功')
            that.visible = false
            that.callbackFunc() // 刷新列表
          })
        }
      })
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
</style>
